'use client'

import { useState } from 'react'
import LineCanvas from '@/components/effect/LineCanvas'
import GradientButton from '@/components/common/GradientButton'

export default function Search() {
  const [isDragging, setIsDragging] = useState(false)

  return (
    <div className="cosmosWrap min-h-[800px] h-[92vh] relative" aria-hidden="true">
      <LineCanvas />

      {/* 内容层 */}
      <div className="z-10 flex items-center justify-center absolute inset-0">
        <div className="flex-shrink-0 w-full max-w-5xl px-4">
          <div className="flex flex-col items-center justify-center text-center px-4 py-10 relative overflow-hidden">
            {/* 上方标签 */}
            <div className="mb-4">
              <span className="inline-flex items-center gap-2 text-[#9aa3b2] text-[12px] px-[10px] py-[6px] border-solid border-[#1f2533] rounded-full bg-[#0f141f]">
                Initial screening AI partner for VC
              </span>
            </div>

            {/* 主标题 */}
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">
              Stop reading decks.
              <br />
              <span className="bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                Start meeting founders.
              </span>
            </h1>

            {/* 副标题 */}
            <p className="text-gray-400 max-w-2xl mb-10">
              We do the first read, highlighting companies that deserve your time so you can focus on finding the next
              outlier.
            </p>

            {/* 拖拽上传区域 */}
            <div
              className={`w-full max-w-2xl rounded-2xl border ${
                isDragging ? 'border-[#38bdf8]' : 'border-[#222]'
              } flex items-center gap-3 bg-[#0f141f] border-solid border-[#1f2533] 
rounded-[14px] px-[12px] py-[10px] mx-auto 
 transition-all duration-200`}
              onDragOver={(e) => {
                e.preventDefault()
                setIsDragging(true)
              }}
              onDragLeave={() => setIsDragging(false)}
              onDrop={(e) => {
                e.preventDefault()
                setIsDragging(false)
                console.log('File dropped:', e.dataTransfer.files)
              }}>
              <input
                type="text"
                placeholder="Drag & drop your deck here…"
                className="flex-1 appearance-none bg-transparent outline-none border-none ring-0 shadow-none 
  text-gray-300 placeholder-gray-500 px-4 py-3 text-sm"
                readOnly
              />

              <GradientButton title="Screen Now" onClick={() => {}} />
            </div>

            {/* 进度条（装饰） */}
            <div className={`w-full max-w-2xl`}>
              <div className="track" aria-hidden="true">
                <div className="bar" />
              </div>
            </div>

            {/* 底部标签 */}
            <div className="mt-6 flex flex-wrap justify-center gap-3">
              {['Bulk upload', 'Partner-grade memos', 'Ready in minutes'].map((tag) => (
                <span
                  key={tag}
                  className="inline-flex items-center gap-2 text-[#9aa3b2] text-[12px] px-[10px] py-[6px] border-solid border-[#1f2533] rounded-full bg-[#0f141f]">
                  {tag}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
